<template>
  <div>
    <!-- 提示 -->
    <el-row>
      <el-alert type="info" title="注意！" description="一个场景仅允许绑定一个中控, 如果需要绑定新的中控设备， 请先取消掉原来绑定的中控设备" show-icon />
    </el-row>

    <!-- 表头 -->
    <el-dialog :visible.sync="headerShow" :close-on-click-modal="false" :close-on-press-escape="false" title="表头">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"/>
      <el-checkbox-group v-model="header">
        <el-checkbox v-for="(value, key) in columns" :key="key" :label="key" :prop="key" >{{ value.label }}</el-checkbox>
      </el-checkbox-group>
    </el-dialog>

    <!-- 表格 -->
    <el-table v-loading="listLoading" ref="table" :data="list" class="table-container" element-loading-text="加载中..." border fit highlight-current-row @sort-change="handleSortChange">
      <el-table-column type="index" width="50" label="序号"/>
      <el-table-column v-for="(value, key) in columns" v-if="value.show" :key="key" :label="value.label" :prop="key" sortable/>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleBindClick(scope.row)">绑定</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 组件 -->
    <el-pagination :current-page.sync="listQuery.page" :page-size="listQuery.size" :total="total" :page-sizes="[5,10,20,30,50]" style="margin-top: 10px" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
</template>

<script>

import { columns } from '@/api/device'
import { bindDevice, sceneDevicePage } from '@/api/scene'
import UnboundDevice from './unboundDevice'
import { toLowerCase } from '@/utils'

export default {
  components: {
    UnboundDevice
  },
  props: {
    scene: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 5,
        order: 'id',
        title: '',
        type: 2, // 所有
        scene: this.scene,
        bind: false
      },
      total: 0,
      searchShow: false,
      headerShow: false,
      isIndeterminate: true,
      checkAll: true,
      columns: [],
      point: false,
      controller: false
    }
  },
  computed: {
    header: {
      set: function(v) {
        Object.keys(this.columns).forEach(key => {
          this.columns[key].show = false
          v.forEach(i => {
            if (key === i) {
              this.columns[key].show = true
            }
          })
        })
        const checkedCount = v.length
        this.checkAll = checkedCount === Object.keys(this.columns).length
        console.log(this.checkAll)
        this.isIndeterminate = checkedCount > 0 && checkedCount < Object.keys(this.columns).length
        console.log(this.isIndeterminate, v.length, Object.keys(this.columns).length)
        return Object.keys(this.columns).filter(i => this.columns[i].show)
      },
      get: function() {
        var array = Object.keys(this.columns).filter(i => this.columns[i].show)
        return array
      }
    }
  },
  mounted() {
    this.fetchData()
    this.columns = columns()
    var checkedCount = this.header.length
    this.checkAll = checkedCount === Object.keys(this.columns).length
    this.isIndeterminate = checkedCount > 0 && checkedCount < Object.keys(this.columns).length
  },
  methods: {
    fetchData() {
      this.listLoading = true
      sceneDevicePage(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },

    // <<<< 搜索头
    handleSearchClick() {
      if (!this.listQuery.title) {
        this.$message({
          message: '搜索内容不能为空',
          type: 'error',
          duration: 800
        })
      }
    },
    handleSearchCleanClick() {
      this.listQuery.title = ''
    },
    // >>>> 搜索头

    // <<<< 工具栏相关
    handleCheckAllChange(val) {
      this.header = val ? Object.keys(this.columns) : []
      Object.keys(this.columns).forEach(key => {
        this.columns[key].show = val
      })
      this.isIndeterminate = false
    },
    handleRefreshClick() {
      this.$message({
        message: '刷新成功',
        type: 'success',
        duration: 800
      })
      this.$emit('refreshP', true)
      this.fetchData()
    },
    handleSearchShowChange() {
      this.searchShow = !this.searchShow
    },
    // >>>> 工具栏相关

    // <<<< 表格相关
    handleBindClick(row) {
      var data = {
        scene: this.scene,
        device: row.id
      }
      bindDevice(data).then(res => {
        if (res.ok) {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 800
          })
          this.fetchData()
        } else {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 800
          })
        }
      })
    },
    // >>>> 表格相关

    // <<<< 分页相关
    handleSizeChange(val) {
      console.log(val)
      this.listQuery.size = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },
    handleSortChange(val) {
      this.listQuery.asc = val.order !== 'descending'
      this.listQuery.order = toLowerCase(val.prop)
      this.fetchData()
    },
    handleHeaderClick() {
      this.headerShow = true
    }
    // >>>> 分页相关
  }
}
</script>
